<template>
	<view class="my-center">

		<!-- 用户box -->
		<view class="user-box" :style="'padding-top: ' + userTop + 'px'">

			<!-- 未登录 -->
			<view class="user-box-left" v-if="true">
				<view class="user-pic">
					<image :src="imagesUrl('user-pic.png')" mode="" class="user-picture" />
				</view>
				<view class="user-info" @click="goToPage('/pages/login/index')">
					<view class="user-info-bold">
						<view class="user-info-name">
							登陆/注册
						</view>
					</view>
					<view class="user-info-normal">
						点击登陆/注册
					</view>
				</view>
			</view>

			<!-- 左侧用户信息 -->
			<view class="user-box-left" v-else>
				<!-- 用户头像 -->
				<view class="user-pic">
					<image :src="user.pic" mode="" class="user-picture" />
				</view>
				<!-- 用户信息 -->
				<view class="user-info">
					<view class="user-info-bold">
						<!-- 用户姓名 -->
						<text class="user-info-name">
							{{user.name}}
						</text>
						<!-- 用户等级 -->
						<text class="user-info-grade">
							{{user.grade}}
						</text>
					</view>
					<view class="user-info-normal">
						ID：{{user.id}}
						<!-- 复制图标 -->
						<uni-icons custom-prefix="iconfont" type="icon-fuzhi" size="14" color="#666"
							@click="copyID(user.id)" style="margin-left: 10rpx;"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 右侧两个图标 -->
			<view class="user-box-right">
				<!-- 消息的图标 -->
				<!-- 有新消息 添加类名 new-message -->
				<uni-icons type="chat" size="24" class="new-message" color="#333"
					@click="goToPage('/pages/messages/messages')"></uni-icons>
				<!-- 设置的图标 -->
				<uni-icons type="gear" size="24" color="#333" @click="goToPage('/pages/settings/settings')"></uni-icons>
			</view>
		</view>

		<!-- 爆点 余额 消费券 -->
		<view class="about-money">
			<!-- 爆点 -->
			<view class="about-money-item" @click="goToPage('/pages/burstpoint/burstpoint')">
				<view class="about-money-bold">
					1.2k
				</view>
				<view class="about-money-normol">
					爆点
				</view>
			</view>
			<!-- 分割线 -->
			<view class="line"></view>
			<!-- 余额 -->
			<view class="about-money-item">
				<view class="about-money-bold" @click="goToPage('/pages/restmoney/restmoney')">
					{{defaultLook?100:'***'}}
				</view>
				<view class="about-money-normol">
					<text @click="goToPage('/pages/restmoney/restmoney')">余额</text>
					<!-- 眼睛图标 -->
					<uni-icons :type="defaultLook?'eye':'eye-slash'" size="18" color="rgba(0, 0, 0, .2)"
						style="vertical-align: middle;margin-left: 8rpx;" @click="defaultLook=!defaultLook"></uni-icons>
				</view>
			</view>
			<!-- 分割线 -->
			<view class="line"></view>
			<!-- 优惠券 -->
			<view class="about-money-item" @click="goToPage('/pages/couponticket/couponticket')">
				<view class="about-money-bold">
					3
				</view>
				<view class="about-money-normol">
					优惠券
				</view>
			</view>
		</view>

		<!-- 背包和寄售 -->
		<view class="bag-and-cell">
			<!-- 我的背包 -->
			<view class="my-bag" @click="goToPage('/pagesBag/index/index')"
				:style="'background: url('+imageUrl('my-bag-bg.png')+') no-repeat;background-size: 336rpx 172rpx;'">
				<view class="bag-cell-cont">我的背包</view>
				<view class="bag-cell-number">
					0
				</view>
			</view>

			<!-- 我的寄售 -->
			<view class="my-cell" @click="goToPage('/pages/mysell/mysell')"
				:style="'background: url('+imageUrl('my-cell-bg.png')+') no-repeat;background-size: 336rpx 172rpx;'">
				<view class="bag-cell-cont">我的寄售</view>
				<view class="bag-cell-number">
					0
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="my-order">

			<!-- 我的订单标题 -->
			<view class="my-order-top">
				<text class="my-order-bold">我的订单</text>
				<!-- 查看全部订单 -->
				<view class="my-order-light" @click="goToDelivery('全部')">
					<text class="order-all">查看全部</text>
					<uni-icons type="forward" size="14" color="#666"></uni-icons>
				</view>
			</view>

			<!-- 订单状态 -->
			<view class="my-order-status">
				<view class="order-status-item" v-for="(item,index) in orderStatus" :key="index"
					@click="goToDelivery(item.cont)">
					<!-- 状态图片 -->
					<image :src="imageUrl(item.pic)" mode="" style="width: 72rpx;height: 72rpx;" />
					<!-- 状态文本 -->
					<view style="font-size: 24rpx;color: #666;">{{item.cont}}</view>
					<!-- 具体数量 -->
					<view class="order-status-num" v-show="item.num != 0">
						{{item.num > 99 ? '99+' : item.num}}
					</view>
				</view>
			</view>
		</view>

		<!-- 其他 -->
		<view class="others">
			<view class="others-tit">
				其他
			</view>
			<view class="others-cont">
				<view class="others-item" v-for="(item,index) in othersList" :key="index" @click="goToPage(item.to)">
					<image :src="imageUrl(item.pic)" mode="" style="width: 48rpx;height: 48rpx;margin: 0 auto 12rpx;" />
					<view style="font-size: 24rpx;color: #666;">{{item.cont}}</view>
				</view>
			</view>
		</view>

		<view class="" style="height: 50rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userTop: 0,
				// 用户
				user: {
					id: '897619340',
					pic: this.imagesUrl('user-pic.png'),
					name: '苏伟洋',
					grade: '黄金'
				},
				// 默认看不到余额
				defaultLook: false,
				// 订单的四种状态
				orderStatus: [{
					pic: 'wait-send-status.png',
					cont: '待发货',
					num: 100
				}, {
					pic: 'wait-get-status.png',
					cont: '待收货',
					num: 10
				}, {
					pic: 'already-status.png',
					cont: '已完成',
					num: 40
				}, {
					pic: 'after-status.png',
					cont: '售后',
					num: 0
				}],

				// 其他列表
				othersList: [{
					pic: 'icon-box-history.png',
					cont: '抽盒记录',
					to: '/pages/other/getboxHistory'
				}, {
					pic: 'icon-commission.png',
					cont: '佣金记录',
					to: '/pages/commission/commission'
				}, {
					pic: 'icon-address.png',
					cont: '地址管理',
					to: '/pages/address/address'
				}, {
					pic: 'icon-my-boom.png',
					cont: '我的爆团',
					to: ''
				}, {
					pic: 'icon-server.png',
					cont: '联系客服',
					to: ''
				}, {
					pic: 'icon-gift-bag.png',
					cont: '兑换礼包',
					to: '/pages/other/exchangeGift'
				}, {
					pic: 'icon-feedback.png',
					cont: '问题反馈',
					to: '/pages/feedback/feedback'
				}, {
					pic: 'icon-joinus.png',
					cont: '合作加盟',
					to: '/pages/other/joinus'
				}, {
					pic: 'icon-joinus.png',
					cont: '帮助中心',
					to: ''
				}]
			}
		},
		methods: {
			copyID(id) {
				// 剪切板
				uni.setClipboardData({
					data: id
				})
			},
			// 跳转订单
			goToDelivery(v) {
				const url = v === '售后' ? '/pages/delivery/AfterDelivery' : `/pages/delivery/delivery?value=${v}`
				this.goToPage(url)
			},
			// 路由跳转
			goToPage(url) {
				uni.navigateTo({
					url
				})
			}
		},
		components: {

		},
		mounted() {
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.userTop = menuButtonInfo.bottom + 20
			// #endif

			// #ifdef H5
			this.userTop = 75
			// #endif

			// #ifdef APP-PLUS
			this.userTop = 75
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.my-center {
		position: relative;
		width: 100vw;

		&::before {
			position: absolute;
			top: -212rpx;
			left: -212rpx;
			content: '';
			display: block;
			width: 424rpx;
			height: 424rpx;
			border-radius: 50%;
			opacity: 1;
			background: #FF9C47;
			filter: blur(300rpx);
			z-index: -99;
		}

		&::after {
			position: absolute;
			top: -117rpx;
			right: -117rpx;
			content: '';
			display: block;
			width: 234rpx;
			height: 234rpx;
			border-radius: 50%;
			opacity: 1;
			background: #FFF200;
			filter: blur(300rpx);
			z-index: -99;
		}

		// 用户盒子
		.user-box {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;

			.user-box-left {
				display: flex;

				// 用户头像
				.user-pic {
					.user-picture {
						width: 108rpx;
						height: 108rpx;
						border-radius: 50%;
						border: 4rpx solid #fff;
						box-sizing: border-box;
					}
				}

				// 用户信息
				.user-info {
					padding: 16rpx 0 0 20rpx;
					line-height: 50rpx;

					// 用户姓名
					.user-info-bold {
						display: flex;
						align-items: center;

						.user-info-name {
							display: inline-block;
							font-size: 32rpx;
							font-weight: 500;
							color: #333;
							line-height: 32rpx;
						}

						// 用户等级
						.user-info-grade {
							display: inline-block;
							width: 56rpx;
							height: 34rpx;
							margin-left: 20rpx;
							font-size: 18rpx;
							font-weight: normal;
							text-align: center;
							line-height: 34rpx;
							background: #1C1C1C;
							color: #fff;
						}
					}

					// 用户ID
					.user-info-normal {
						padding-top: 6rpx;
						font-size: 24rpx;
						color: #999;
					}
				}
			}

			// 右侧两个小图标
			.user-box-right {
				position: relative;
				display: flex;
				justify-content: space-between;
				width: 120rpx;

				.new-message::after {
					position: absolute;
					top: -6rpx;
					left: 42rpx;
					content: '';
					display: block;
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background: #FF7803;
				}
			}
		}

		// 爆点 余额 优惠券
		.about-money {
			display: flex;
			align-items: center;
			width: 690rpx;
			margin: 18rpx auto 0;
			padding: 50rpx 0;
			border-radius: 16rpx;
			text-align: center;
			line-height: 40rpx;
			background: rgba(255, 255, 255, .6);
			font-size: 32rpx;

			// 分割线
			.line {
				width: 1rpx;
				height: 48rpx;
				background: rgba(0, 0, 0, 0.1);
			}

			.about-money-item {
				width: 230rpx;
				height: 72rpx;

				// 具体数值
				.about-money-bold {
					font-weight: 500;
					color: #333;
				}

				// 文字说明
				.about-money-normol {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		// 我的背包 我的寄售
		.bag-and-cell {
			display: flex;
			justify-content: space-between;
			width: 690rpx;
			margin: 18rpx auto 0;
			font-size: 32rpx;
			font-weight: 500;

			// 我的背包
			.my-bag,
			.my-cell {
				width: 336rpx;
				height: 172rpx;
				border-radius: 16rpx;

				// 文本内容
				.bag-cell-cont {
					padding: 32rpx 0 0 32rpx;
				}

				// 文本数量
				.bag-cell-number {
					padding: 20rpx 0 0 32rpx;
				}
			}
		}

		// 我的订单
		.my-order {
			width: 690rpx;
			margin: 18rpx auto 0;
			padding: 32rpx;
			border-radius: 16rpx;
			background-color: #fff;
			box-sizing: border-box;

			.my-order-top {
				display: flex;
				justify-content: space-between;
				color: #333;

				.my-order-bold {
					font-size: 28rpx;
				}

				.my-order-light {
					transform: translateY(-4rpx);

					// 查看全部订单
					.order-all {
						font-size: 24rpx;
						color: #666;
					}
				}
			}

			// 我的订单状态
			.my-order-status {
				display: flex;
				justify-content: space-around;
				margin-top: 48rpx;
				text-align: center;
				line-height: 44rpx;

				.order-status-item {
					position: relative;

					// 订单状态数值
					.order-status-num {
						position: absolute;
						top: -20rpx;
						right: -50rpx;
						width: 68rpx;
						height: 40rpx;
						border-radius: 20rpx;
						background: #FA5151;
						font-size: 24rpx;
						line-height: 40rpx;
						color: #fff;
					}
				}
			}
		}

		// 其他
		.others {
			width: 690rpx;
			padding: 30rpx 32rpx;
			margin: 18rpx auto 0;
			border-radius: 16rpx;
			background: #fff;

			.others-tit {
				font-size: 28rpx;
				color: #333;
			}

			.others-cont {
				display: flex;
				flex-wrap: wrap;
				text-align: center;

				.others-item {
					width: 96rpx;
					margin-top: 50rpx;
					margin-right: 60rpx;

					&:nth-child(4n) {
						margin-right: 0;
					}

					&:nth-child(4n+1) {
						margin-left: 28rpx;
					}
				}
			}
		}
	}
</style>